<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>缴费信息</title>

    <style>
        .x-nav{padding:0 20px;position:relative;z-index:99;border-bottom:1px solid #e5e5e5;line-height:39px;height:39px;overflow:hidden}

        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(40%)}
    </style>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>收费管理</cite></a>
        <a><cite>缴费信息</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>


<div class="layui-col-xs10" align="right">
    <button type="button" class="layui-btn layui-btn-normal" id="paySomeBtn">
        <i class="layui-icon">&#xe608;</i> 批量缴费
    </button>
    <button type="button" class="layui-btn layui-btn-warm" id="downloadBtn">
        <i class="layui-icon">&#xe608;</i> 批量下载
    </button>
    <table id="billTable" lay-filter="billTable" ></table>
</div>





<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<script type="text/javascript">
    $(window).on('load',function() {
        let item = localStorage.getItem("code");
        if (item != 0) {
            window.location.href = "/login.jsp"
        }
    });
    layui.use(['element'], function(){
        var element=layui.element;
        element.init();
    });

    layui.use(["table","form","upload","layer","tree","laydate"],function() {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate=layui.laydate;

        //渲染table表格=====开始
        table.render({
            elem: '#billTable'
            ,page: true
            ,limit:5
            ,limits:[5,8,12]
            ,url: 'http://localhost:8888/hy-bill/showAllUserBill' //数据接口
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '编号' }
                ,{field: 'waterBill', title: '水费金额'}
                ,{field: 'electricityBill', title: '电费金额'}
                ,{field: 'wuyeBill', title: '物业费金额'}
                ,{field: 'billDate', title: '账单日期'}
                ,{field: 'allCost', title: '账单总费用'}
                ,{field: 'state', title: '状态',
                    templet:function(d){
                        return d.state==1?"已缴费":"未缴费";
                    }
                }
                ,{field: 'userName', title: '业主姓名'}
                ,{field: 'payDate', width:150,title: '缴纳时间'}
                ,{title:"操作", width:200, align:'center', toolbar: '#barDemo'}
            ]]
        });

        laydate.render({
            elem: '#billDate'
            ,type: 'month'
        });

        /*监听table表格上面的操作按钮====开始*/

        table.on("tool(billTable)",function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'pay'){
                //调用confirm方法
                layer.confirm('是否确认缴费？',function (ss) {
                    //发出ajax请求
                    if(data.state==1){
                        layer.msg("已经缴费，请勿重复缴费！！！");
                    }else {
                        $.ajax({
                            url: "http://localhost:8888/hy-bill/payBill",
                            data: "id="+data.id,
                            dataType: "json",
                            success: function (uyg) {
                                //提示删除成功，刷新table表格
                                layer.msg("缴费成功");
                                table.reload("billTable");
                            }
                        });
                    }
                    layer.close(ss);
                });
            }
        })

        /*监听table表格上面的操作按钮====结束*/


        //批量缴费开始
        $("#paySomeBtn").click(function(){
            var check = table.checkStatus('billTable'); //idTest 即为基础参数 id 对应的值
            var data=check.data;
            if(check.data.length>0){ //获取选中行数量，可作为是否有选中行的条件
                layer.confirm('是否确认缴费?', function(index){
                    var ids=[];
                    for(var i=0;i<check.data.length;i++){
                        ids.push(data[i].id)
                    }
                    console.log(ids);
                    //发出ajax请求
                    $.ajax({
                        url:"${pageContext.request.contextPath}/hy-bill/paySomeBill?ids="+ids,
                        data:ids,
                        dataType:"json",
                        success:function(data){
                            //提示缴费成功，刷新table表格
                            if(data.code==0){
                                layer.msg(data.message);
                                table.reload("billTable");
                            }else if(data.code==1){
                                layer.msg(data.message);
                                table.reload("billTable");
                            }
                        }
                    });
                    layer.close(index);
                });
            }else{
                layer.msg("请先选中行数据！");
            }
        });
        //批量缴费结束

        //批量导出开始

        $("#downloadBtn").click(function () {
            var check=table.checkStatus("billTable");
            var data=check.data;
            if(data.length>0){
                layer.confirm("您确定要下载选中么?",function (index) {
                    var ids=[];
                    for(var i=0;i<data.length;i++){
                        ids.push(data[i].id);
                    }
                    location.href="${pageContext.request.contextPath}/hy-bill/exportBill?ids="+ids;
                    layer.closeAll();
                    table.reload("billTable");
                })
                return false;
            }else{
                layer.msg("请先选中数据!");
            }
        });
        // 批量导出结束


    })

    $("#reset").click(function(){
        $("input[type='text']").prop("value","");
    });
</script>

<script type="text/html" id="barDemo">
    {{#  if(d.state == '0'){ }}
    <button type="button" class="layui-btn  layui-btn-sm" lay-event="pay">缴费</button>
    {{#  }  }}
</script>
</body>
</html>
